<template>
  <div class="tree-menu">
    <div v-for="(item, index) in data" :key="index" v-mouseenter>
      <MenuItem>
        <span class="iconfont icon-xiangyou" v-if="item.children"></span>
        <span class="iconfont icon-yingyong" v-else></span>
        {{ item.label }}
      </MenuItem>
      <KTreeMenu :deep="deep + 1" :data="item.children" v-if="item.children" :style="{ display: 'none', left: deep * 20 + 'px' }"></KTreeMenu>
    </div>
  </div>
</template>

<script>
import MenuItem from "./MenuItem";
import mouseenter from "../../directives/mouseenter";

export default {
  name: "KTreeMenu",
  components: {MenuItem},
  props: {
    deep: {
      type: Number,
      default() {
        return 1
      }
    },
    data: {
      type: Array,
      default() {
        return [{
          label: '一级 1',
          children: [{
            label: '二级 1-1'
          }]
        }]
      }
    }
  },
  directives: {
    mouseenter
  },
}
</script>

<style scoped>
  .tree-menu {
    position: relative;
  }
  .iconfont {
    font-size: 6px;
  }
</style>